<template>
  <div class="classes-wrap">
    <div class="screen-box">
      <div class="open-box" @click="openModal">
        <img src="./screening.png" class="pic1" onclick="return false"/>
        <span class="all">{{title}}</span>
        <img src="./pull.png" class="pic2" onclick="return false"/>
      </div>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad" class="classes-box"
    >
      <div class="classes-con" v-for="(item,index) in classesList" :key="index">
        <div class="mui-input-row mui-checkbox select" @click="singleCheck">
          <input name="checkbox" type="checkbox" :value="item.id">
        </div>
        <span class="name">{{item.userName}}</span><span>{{item.userCardNumber}}</span><span
        class="classes">{{item.workClass}}</span>
      </div>
    </van-list>


    <div class="empty-wrap" v-if="classesList.length == 0 && !loading">
      <div class="empty-box">
        <img src="./empty.png" class="empty" onclick="return false"/>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>
    <div class="opt-box" v-else>
      <div class="opt-con">
        <div class="mui-input-row mui-checkbox select" @click="checkFull">
          <input name="checkbox" type="checkbox" ref="all">
        </div>
        <span class="all-title">全选</span>
        <span class="select-title" v-show="number">已选{{number}}人</span>
        <div class="adjust-box">
          <span class="title">调整为:</span>
          <popup-picker :data="workClassList" v-model="workClass" class="entry"
                        placeholder="请选择班次"></popup-picker>
          <img src="./in.png" class="pic" onclick="return false"/>
        </div>
      </div>
      <div class="btn-box">
        <button type="button" class="btn" @click="confirm">确定</button>
      </div>
    </div>

    <!--筛选-->
    <div class="screen-modal" v-show="showModal">
      <div class="screen-con">
        <div class="content-sec">

          <div class="sec" @click="queryScreen('','全部班次')" :class="{'active2':check == ''}">全部班次
            <img src="./get.png" v-if="check == ''" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen('早班','早班')" :class="{'active2':check == '早班'}">早班
            <img src="./get.png" v-if="check == '早班'" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen('中班','中班')" :class="{'active2':check == '中班'}">中班
            <img src="./get.png" v-if="check == '中班'" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen('晚班','晚班')" :class="{'active2':check == '晚班'}">晚班
            <img src="./get.png" v-if="check == '晚班'" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen('白班','白班')" :class="{'active2':check == '白班'}">白班
            <img src="./get.png" v-if="check == '白班'" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen('夜班','夜班')" :class="{'active2':check == '夜班'}">夜班
            <img src="./get.png" v-if="check == '夜班'" class="pic7" onclick="return false"/>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {PopupPicker} from 'vux'
  import {baseUrl} from "../../config/env"

  export default {
    inject: ['reload'],
    data() {
      return {
        title: "全部班次",
        workClassList: [['早班', '中班', '晚班', '白班', '夜班']],
        workClass: [],
        mechanismId: "",
        check: "",
        showData: 0,
        classesList: [],
        currentPage: 1,
        PageSize: 20,
        loading: false,
        finished: false,
        showModal: false,
        flag: true,
        number: ""
      }
    },
    mounted() {
      this.mechanismId = this.$route.query.id;
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
    },
    methods: {
      onLoad() {
        // 异步更新数据
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryClassesList();
            this.timer = null;
          }, 500)
        }
      },
      singleCheck() {//单选
        let allBox = document.getElementsByName('checkbox');
        let checkBox = this.getCheckBoxRes('checkbox');
        if (checkBox.length == allBox.length) {
          this.$refs.all.checked = true;
        } else {
          this.$refs.all.checked = false;
        }
        this.number = checkBox.length;
      },
      checkFull() {//全选
        if (this.flag) {
          this.selectAll('checkbox', true);
          this.flag = false;
        } else {
          this.selectAll('checkbox', false);
          this.flag = true;
        }
        this.number = this.getCheckBoxRes('checkbox').length;
      },
      selectAll(className, flag) {//全选/全不选
        let loves = document.getElementsByName(className);
        for (let i = 0; i < loves.length; i++) {
          loves[i].checked = flag;
        }
      },
      getCheckBoxRes(className) {//选择checkbox
        let rdsObj = document.getElementsByName(className);
        let checkVal = new Array();
        let k = 0;
        for (let i = 0; i < rdsObj.length; i++) {
          if (rdsObj[i].checked) {
            if (rdsObj[i].value != "on") {
              checkVal[k] = parseInt(rdsObj[i].value);
            }
            k++;
          }
        }
        return checkVal;
      },
      queryScreen(key, val) {//根据筛选查询
        this.check = key;
        this.title = val;
        this.showModal = false;
        this.initVanList();
      },
      initVanList() {//初始化
        this.currentPage = 1;
        this.PageSize = 20;
        this.classesList = [];
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.onLoad();
        }
      },
      queryClassesList() {//班次调整
        let time = (new Date()).getTime();
        let url = baseUrl + "/data/get_ka_workClass_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/data/get_ka_workClass_list?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&check=" + this.check + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.classesList = this.classesList.concat(resultObj.data);
              // 加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {//数据全部加载完成
              this.loading = false;
              if (this.classesList.length >= resultObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openModal() {//打开筛选
        this.showModal = true;
      },
      confirm() {//确定
        let checkList = this.getCheckBoxRes('checkbox');
        if (checkList.length < 1) {
          this.$vux.toast.text("请选择要调整班次的员工", "middle");
          return;
        }
        let classes = String(this.workClass);
        if (classes == "" || classes == undefined) {
          this.$vux.toast.text("请选择要调整的班次", "middle");
          return;
        }


        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {
          "mechanismId": this.mechanismId,
          "workClass": classes,
          "ids": String(checkList)
        };
        let time = (new Date()).getTime();
        let url = baseUrl + "/data/update_ka_workClass?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.post(baseUrl + "/data/update_ka_workClass?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("班次调整失败,请重试", "middle");
              this.reload();
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
    },
    components: {
      PopupPicker
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/stylus/mixin.styl"
  @import "../../../static/mui.min.css"

  .classes-wrap
    wh(100%, 100%)
    .screen-box
      position: fixed
      top: 0
      display: flex
      align-items: center
      wh(100%, 0.8rem)
      z-index: 99
      background: rgba(242, 242, 242, 1)
      .open-box
        display: flex
        align-items: center
        wh(auto, 0.8rem)
        margin-left: 0.293rem
        .pic1
          margin-right: 0.173rem
          wh(0.48rem, 0.48rem)
        .all
          size-color(0.373rem, rgba(102, 102, 102, 1))
          margin-right: 0.12rem
        .pic2
          wh(0.32rem, 0.32rem)
    .classes-box
      position: absolute
      top: 0.8rem
      width: 100%
      background: #FFFFFF
      .classes-con
        display: flex
        align-items: center
        margin: 0 auto
        wh(100%, 1.28rem)
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
        &:last-child
          margin-bottom: 3.093rem
        span
          height: 1.28rem
          line-height: 1.28rem
          size-color(0.4rem, rgba(51, 51, 51, 1))
        .name
          margin-left: 0.44rem
          width: 2.3rem
          ellipsis()
        .classes
          margin-right: 0.32rem
          margin-left: auto
        .select
          margin-left: 0.32rem
          wh(0.507rem, 0.507rem)
    .opt-box
      position: fixed
      bottom: 0
      wh(100%, 3.093rem)
      background: #FFF
      .opt-con
        display: flex
        align-items: center
        wh(100%, 1.28rem)
        margin-bottom: 0.267rem
        .select
          margin-right: 0.307rem
          margin-left: 0.32rem
          wh(0.507rem, 0.507rem)
        .all-title
          margin-right: 0.347rem
          size-color(0.427rem, rgba(153, 153, 153, 1))
        .select-title
          size-color(0.427rem, rgba(60, 175, 255, 1))
        .adjust-box
          margin-left: auto
          margin-right: 0.32rem
          display: flex
          align-items: center
          .title
            size-color(0.427rem, rgba(51, 51, 51, 1))
          .entry
            flex: 1
            text-align: right
            padding-right: 0.267rem
            height: 0.6rem
            line-height: 0.6rem
            size-color(0.427rem, rgba(51, 51, 51, 1))
          .entry >>> .vux-cell-primary .vux-popup-picker-select .vux-popup-picker-placeholder
            color: rgba(204, 204, 204, 1)
          .pic
            wh(0.32rem, 0.32rem)
      .btn-box
        text-align: center
        wh(100%, 1.28rem)
        .btn
          width: 90.4%
          height: 1.28rem
          background: rgba(60, 175, 255, 1)
          size-color(0.453rem, rgba(255, 255, 255, 1))
          border-radius: 0.16rem
    .empty-wrap
      fj(center, center)
      position: fixed
      top: 0.8rem
      left: 0
      right: 0
      bottom: 3.093rem
      wh(100%, auto)
      .empty-box
        display: flex
        flex-direction: column
        align-items: center
        wh(80%, auto)
        .empty
          wh(4.773rem, 4.773rem)
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          size-color(0.373rem, rgba(68, 68, 68, 1))
    .screen-modal
      position: fixed
      top: 0.8rem
      left: 0
      right: 0
      bottom: 0
      z-index: 99
      background-color: rgba(0, 0, 0, 0.5)
      .screen-con
        wh(100%, 6.72rem)
        background: #FFF
        .content-sec
          display: flex
          flex-direction: column
          wh(auto, 100%)
          margin-left: 0.48rem
          margin-right: 0.507rem
          .sec
            display: flex
            align-items: center
            height: 1.067rem
            line-height: 1.067rem
            size-color(0.427rem, rgba(102, 102, 102, 1))
            &:nth-child(1)
              margin-top: 0.267rem
          .active2
            color: $color
          .pic7
            margin-left: auto
            wh(0.64rem, 0.64rem)
</style>
